<template>
 <div class="home">
    <vueHead :name="name"></vueHead>

      <md-list class="custom-list md-triple-line">

    <md-list-item v-for="(item,i) in dateils"  :key="i" @click="openNewWindow(item.actor.html_url)">
      <md-avatar>
        <img :src="item.actor.avatar_url" alt="People">
      </md-avatar>

      <div class="md-list-text-container">
        <span>{{item.actor.login}}</span>
        <span>{{whatType(item.type)}}{{item.repo.full_name}} </span>
        <p><md-icon class="md-warn">access_time</md-icon> {{item.created_at | timerFilter}}</p>
      </div>

      <md-divider class="md-inset"></md-divider>
    </md-list-item>

  </md-list>

 </div>
</template>

<script type="text/ecmascript-6">
import vueHead from '../components/headbar'
import vueList from '../components/list'
import api from '../common/api'
export default {
  data () {
    return {
      name: '公开动态',
      dateils: []
    }
  },
  created () {
    this.axios
      .get(api.url + 'events', {
        params: {
          access_token: localStorage.getItem('userToken'),
          page: 1,
          per_page: 10
        }
      })
      .then(Response => {
        this.dateils = Response.data
      })
      .catch(Error => {
        console.log('数据获取失败' + Error)
      })
  },
  components: {
    vueHead,
    vueList
  },
  methods: {
    whatType (value) {
      switch (value) {
        case 'PushEvent':
          return '推送了'
        case 'CreateEvent':
          return '创建了'
        case 'IssueEvent':
          return '评论了'
        case 'ForkEvent' :
          return '更新了'
        default:
          return '更新了'
      }
    },
     openNewWindow (url) {
       window.open(url)
     }

  }
}
</script>

<style scoped>
.md-tabs {
  margin-top: 2px;
}
</style>
